﻿
<!doctype html>
<%@ page language="java" contentType="text/html;charset=utf-8"%>
<%@ page import="com.kbwsoft.esiframe.core.util.*"%>
<%@ page import="sun.jdbc.rowset.*"%>
<%@ page import="java.net.*"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/" + "mobileweb";
  String ntp = request.getParameter("ntp");
  String text = java.net.URLDecoder.decode(request.getParameter("text") , "UTF-8");
  DBTransUtil transUtil = new DBTransUtil();
  String str = "select * from v_news_list where flag = '0' and status <> '0' and newstype = '"+ntp+"' ";
  if(!text.equals("") && text != null){
    str = str + " and (title like binary '%"+text+"%' or zy like binary '%"+text+"%')";
  }
  str = str + " and audittime is not null order by status asc, audittime desc";
  //System.out.println(str);
  CachedRowSet crs1 = transUtil.getResultBySelect(str);
  //System.out.println(crs1.size());
      String cname = "科普常识";
    String ename = "Popular Science Knowledge";
    if(ntp.equals("11")){
      cname = "科普常识";
	  ename = "Popular Science Knowledge";
    }else if(ntp.equals("21")){
      cname = "最新动态";
	  ename = "Latest Activity";
    }else if(ntp.equals("31")){
      cname = "会议通知";
	  ename = "Meeting Notice";
    }else if(ntp.equals("41")){
      cname = "医学文献";
	  ename = "Medical literature";
    }
%>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title></title>

  <style>
    html,
    body,
    .page {
      height: 100%;
    }

    #wrapper {
      position: absolute;
      top: 49px;
      bottom: 0;
      overflow: hidden;
      margin: 0;
      width: 100%;
      padding: 0 8px;
      background-color: #f8f8f8;
    }

    .am-list {
      margin: 0;
    }

    .am-list > li {
      background: none;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .pull-action {
      text-align: center;
      height: 45px;
      line-height: 45px;
      color: #999;
    }

    .pull-action .am-icon-spin {
      display: none;
    }

    .pull-action.loading .am-icon-spin {
      display: block;
    }

    .pull-action.loading .pull-label {
      display: none;
    }
  </style>
</head>
<body>




<div class="page">
  <header data-am-widget="header" class="am-header am-header-default">
    <h1 class="am-header-title">
    </h1>
  </header>

  <div id="wrapper" data-am-widget="list_news"
       class="am-list-news am-list-news-default">
    <div class="am-list-news-bd">

      <ul class="am-list" id="events-list">
        <li class="am-list-item-desced">
          <div class="am-list-item-text">
            正在加载内容...
          </div>
        </li>
      </ul>
      <div class="pull-action" id="pull-up">
        <span class="am-icon-arrow-down pull-label"
              id="pull-up-label"> 上拉加载更多</span>
        <span class="am-icon-spinner am-icon-spin"></span>
      </div>
    </div>
  </div>
</div>

<!--
<div id="wrapper" data-am-widget="list_news" class="am-list-news am-list-news-default">
	<div class="am-list-news-hd am-cf">
      <a href="###" class=""><h2><%=cname%>|<%=ename%></h2></a>
    </div>
	<div class="am-list-news-bd">
      <ul class="am-list" id='events-list'>
        <li class="am-list-item-desced">
          <div class="am-list-item-text">
            正在加载内容...
          </div>
        </li>
        </ul>
      </div>
      <div class="pull-action" id="pull-up">
        <span class="am-icon-arrow-down pull-label"
              id="pull-up-label"> 上拉加载更多</span>
        <span class="am-icon-spinner am-icon-spin"></span>
      </div>
    </div>
</div>
-->

<script type="text/x-handlebars-template" id="tpi-list-item">
  {{#each this}}
   <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-bottom-right" data-id="{{id}}">
     <h3 class="am-list-item-hd"><a href="info.jsp?newid={{newid}}" target='_blank'>{{title}}</a></h3>
     <div class="am-u-sm-8 am-list-main"><div class="am-list-item-text">{{zy}}</div></div>
	 {{#if newspic}}
	 <div class="am-list-thumb am-u-sm-4">
	   <a href="info.jsp?newid={{newid}}" target='_blank'>
	     <img src="http://101.200.77.243/ctc/upload/{{newspic}}" alt="{{title}}" />
	   </a>
	 </div>
     {{else}}
	 <div class='am-list-main'><div class='am-list-item-text'>{{zy}}</div></div>
     {{/if}}
   </li>
  {{/each}}
</script>

<script>
  (function($) {
    var EventsList = function(element, options) {
      var $main = $('#wrapper');
      var $list = $main.find('#events-list');
      var $pullDown = $main.find('#pull-down');
      var $pullDownLabel = $main.find('#pull-down-label');
      var $pullUp = $main.find('#pull-up');
      var topOffset = -$pullDown.outerHeight();

      this.compiler = Handlebars.compile($('#tpi-list-item').html());
      this.prev = this.next = this.start = options.params.start;
      this.total = null;

      this.getURL = function(params) {
        var queries = ['callback=?'];
        for (var key in  params) {
          if (key !== 'start') {
            queries.push(key + '=' + params[key]);
          }
        }
        queries.push('start=');
        return options.api + '?' + queries.join('&');
      };

      this.renderList = function(start, type) {
        var _this = this;
        var $el = $pullDown;

        if (type === 'load') {
          $el = $pullUp;
        }

        $.getJSON(this.URL + start).then(function(data) {
          //console.log(data);
          _this.total = data.total;
          var html = _this.compiler(data.events);
		  //console.log(html);
          if (type === 'refresh') {
            $list.children('li').first().before(html);
          } else if (type === 'load') {
            $list.append(html);
          } else {
            $list.html(html);
          }

          //refresh iScroll
          setTimeout(function() {
            _this.iScroll.refresh();
          }, 100);
        }, function(data) {
	      //console.log(data)
          console.log('Error...')
        }).always(function() {
          _this.resetLoading($el);
          if (type !== 'load') {
            _this.iScroll.scrollTo(0, topOffset, 800, $.AMUI.iScroll.utils.circular);
          }
        });
      };

      this.setLoading = function($el) {
        $el.addClass('loading');
      };

      this.resetLoading = function($el) {
        $el.removeClass('loading');
      };

      this.init = function() {
		 // alert(12222)
        var myScroll = this.iScroll = new $.AMUI.iScroll('#wrapper', {
          click: true
        });
        // myScroll.scrollTo(0, topOffset);
        var _this = this;
        var pullFormTop = false;
        var pullStart;

        this.URL = this.getURL(options.params);
        this.renderList(options.params.start);
        myScroll.on('scrollStart', function() {
          if (this.y >= topOffset) {
            pullFormTop = true;
          }
          pullStart = this.y;
        });

        myScroll.on('scrollEnd', function() {
          if (pullFormTop && this.directionY === -1) {
            _this.handlePullDown();
          }
          pullFormTop = false;

          // pull up to load more
          if (pullStart === this.y && (this.directionY === 1)) {
            _this.handlePullUp();
          }
        });
      };

      this.handlePullDown = function() {
        console.log('handle pull down');
        if (this.prev > 0) {
          this.setLoading($pullDown);
          this.prev -= options.params.count;
          this.renderList(this.prev, 'refresh');
        } else {
		  //$("#pull-up-label").html(' 没有更多 ');
          console.log('别刷了，没有了');
        }
      };

      this.handlePullUp = function() {
        console.log('handle pull up');
        if (this.next < this.total) {
          this.setLoading($pullUp);
          this.next += options.params.count;
		  if(this.next >= this.total){
			  $("#pull-up-label").html(' 没有更多 ');
		  }
          this.renderList(this.next, 'load');
        } else {
		  $("#pull-up-label").html(' 没有更多 ');
          console.log(this.next);
          // this.iScroll.scrollTo(0, topOffset);
        }
      }
    };

    $(function() {
      var app = new EventsList(null, {
         /*
		 api: 'https://api.douban.com/v2/event/list',
		params: {
          start: 100,
          type: 'music',
          count: 10,
          loc: 'beijing'

        }
		*/

		api: 'news_list_data.jsp',
        params: {
          start: 0,
		  count: 10,
          ntp: "<%=ntp%>",
          text: encodeURI(encodeURI($('#search').val()))
        }

      });
      app.init();
    });

    document.addEventListener('touchmove', function(e) {
      e.preventDefault();
    }, false);
  })(window.jQuery);

</script>
</body>
</html>
<!--http://pnc.co.il/dev/iscroll-5-pull-to-refresh-and-infinite-demo.html-->
